<template>
  <teleport to='#message'>
      <transition name="bounce">
          <div v-if="visible" class="messageContainer">
              <div class="inner">{{message}}</div>
          </div>
      </transition>
  </teleport>
</template>

<script lang="ts">
import { defineComponent,ref,PropType } from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate'
export type messageType = 'default' | 'success' | 'error'
export default defineComponent({
    props:{
        message:String,
        type:{
            type:String as PropType<messageType>
        }
    },
    setup(){
        useDOMCreate('message')
        const visible = ref(true)
        return {visible}
    }
    
})
</script>

<style lang="scss">
@import '~@/styles/mixin.scss';
@import '~@/styles/color.scss';
@include bounce-effect;
.message-enter-active{
    animation: down .1s;
}
@keyframes down {
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }
}
.message-leave-active{
    animation: bounceOutDown .3s;
}
.messageContainer{
    width: 100vw;
    background-image: inherit;
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 666;
    .inner{
        @include glassStyle(200px,1);
        @include clickEffect;
        margin: 0 auto;
        color: $mainColor;
        width: 300px;
        height: 60px;
        border-radius: 10px;
        text-align: center;
        line-height: 60px;
        animation: down .3s;
    }
}
</style>